<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交网站相册列表样式展示</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --primary-color: #3b7ddd;
            --secondary-color: #2a5caa;
            --accent-color: #5a95e2;
            --light-color: #f8f9fa;
            --dark-color: #212529;
            --gray-color: #6c757d;
            --light-gray: #e9ecef;
            --success-color: #28a745;
            --like-color: #dc3545;
            --bookmark-color: #ffc107;
            --transition: all 0.3s ease;
        }
        
        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background-color: #f8fafc;
            color: var(--dark-color);
            line-height: 1.6;
            padding: 30px 0;
        }
        
        .container {
            max-width: 1200px;
        }
        
        .page-header {
            text-align: center;
            margin-bottom: 40px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .page-header h1 {
            color: var(--primary-color);
            margin-bottom: 10px;
        }
        
        .list-example {
            background-color: #fff;
            border-radius: 10px;
            padding: 30px;
            margin-bottom: 40px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        }
        
        .example-title {
            font-size: 1.5rem;
            margin-bottom: 25px;
            color: var(--primary-color);
            padding-bottom: 12px;
            border-bottom: 1px solid var(--light-gray);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .example-description {
            color: var(--gray-color);
            margin-bottom: 25px;
            font-size: 0.95rem;
        }
        
        /* 相册卡片通用样式 */
        .album-card {
            border-radius: 10px;
            overflow: hidden;
            transition: var(--transition);
            position: relative;
            background-color: #fff;
        }
        
        .album-card:not(:last-child) {
            margin-bottom: 25px;
        }
        
        .album-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        
        /* 相册封面样式 */
        .album-cover {
            position: relative;
            overflow: hidden;
            border-radius: 8px;
        }
        
        .album-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }
        
        .album-card:hover .album-cover img {
            transform: scale(1.05);
        }
        
        .photo-count {
            position: absolute;
            bottom: 10px;
            right: 10px;
            background-color: rgba(0,0,0,0.7);
            color: white;
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 0.8rem;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .album-privacy {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: rgba(0,0,0,0.7);
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
        }
        
        /* 相册信息样式 */
        .album-info {
            padding: 15px 0;
        }
        
        .album-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin: 0 0 8px 0;
            color: var(--dark-color);
            transition: var(--transition);
        }
        
        .album-card:hover .album-title {
            color: var(--primary-color);
        }
        
        .album-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 10px;
            font-size: 0.85rem;
            color: var(--gray-color);
        }
        
        .meta-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .album-description {
            margin-bottom: 15px;
            line-height: 1.6;
            font-size: 0.95rem;
            color: #495057;
        }
        
        /* 创建者信息样式 */
        .album-creator {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
            font-size: 0.9rem;
        }
        
        .creator-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--light-gray);
        }
        
        .creator-name {
            font-weight: 500;
        }
        
        /* 统计数据样式 */
        .album-stats {
            display: flex;
            gap: 20px;
            margin-bottom: 15px;
            font-size: 0.9rem;
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 5px;
            color: var(--gray-color);
        }
        
        .stat-item strong {
            color: var(--dark-color);
        }
        
        /* 操作按钮样式 */
        .album-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .action-buttons {
            display: flex;
            gap: 10px;
        }
        
        .btn-icon {
            color: var(--gray-color);
            background: none;
            border: none;
            padding: 6px 10px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
            transition: var(--transition);
            font-size: 0.9rem;
        }
        
        .btn-icon:hover {
            background-color: rgba(59, 125, 221, 0.1);
            color: var(--primary-color);
        }
        
        .btn-icon.liked {
            color: var(--like-color);
        }
        
        .btn-icon.saved {
            color: var(--bookmark-color);
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 8px 20px;
            border-radius: 6px;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .btn-primary:hover {
            background-color: var(--secondary-color);
            transform: translateY(-2px);
        }
        
        .btn-secondary {
            background-color: var(--light-gray);
            color: var(--dark-color);
            border: none;
            padding: 8px 20px;
            border-radius: 6px;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .btn-secondary:hover {
            background-color: var(--gray-color);
            color: white;
            transform: translateY(-2px);
        }
        
        /* 网格布局样式 */
        .grid-layout {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 25px;
        }
        
        .grid-layout .album-card {
            border: 1px solid var(--light-gray);
            padding: 15px;
        }
        
        .grid-layout .album-cover {
            height: 200px;
            margin-bottom: 15px;
        }
        
        .grid-layout .album-description {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        /* 大图布局样式 */
        .large-image-layout .album-card {
            display: flex;
            gap: 25px;
            padding: 20px;
            border: 1px solid var(--light-gray);
        }
        
        .large-image-layout .album-cover {
            flex: 0 0 300px;
            height: 220px;
        }
        
        .large-image-layout .album-details {
            flex: 1;
        }
        
        /* 瀑布流布局样式 */
        .masonry-layout {
            column-count: 1;
            column-gap: 25px;
        }
        
        @media (min-width: 768px) {
            .masonry-layout {
                column-count: 2;
            }
        }
        
        @media (min-width: 992px) {
            .masonry-layout {
                column-count: 3;
            }
        }
        
        .masonry-layout .album-card {
            break-inside: avoid;
            margin-bottom: 25px;
            border: 1px solid var(--light-gray);
            padding: 15px;
        }
        
        .masonry-layout .album-cover {
            margin-bottom: 15px;
        }
        
        .masonry-layout .album-cover.tall {
            height: 300px;
        }
        
        .masonry-layout .album-cover.medium {
            height: 220px;
        }
        
        .masonry-layout .album-cover.short {
            height: 180px;
        }
        
        /* 简约列表布局样式 */
        .simple-list-layout .album-card {
            display: flex;
            align-items: center;
            padding: 15px;
            border: 1px solid var(--light-gray);
            gap: 15px;
        }
        
        .simple-list-layout .album-cover {
            flex: 0 0 100px;
            height: 100px;
        }
        
        .simple-list-layout .album-info {
            flex: 1;
            padding: 0;
        }
        
        .simple-list-layout .album-description {
            display: none;
        }
        
        .simple-list-layout .album-stats {
            margin-bottom: 0;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .large-image-layout .album-card {
                flex-direction: column;
            }
            
            .large-image-layout .album-cover {
                width: 100%;
                flex: none;
            }
            
            .album-actions, .action-buttons {
                flex-wrap: wrap;
                gap: 8px;
            }
            
            .simple-list-layout .album-card {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .simple-list-layout .album-cover {
                width: 100%;
                flex: none;
                height: auto;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="page-header">
            <h1>社交网站相册列表样式展示</h1>
            <p class="text-muted">展示不同风格的相册列表，包含完整的互动功能和信息展示</p>
        </div>
        
        <!-- 示例1：网格布局 -->
        <div class="list-example">
            <h3 class="example-title"><i class="fas fa-th"></i> 网格布局相册</h3>
            <p class="example-description">整齐的网格布局，适合展示多个相册，每个相册信息完整，视觉效果统一</p>
            
            <div class="grid-layout">
                <!-- 相册1 -->
                <div class="album-card">
                    <div class="album-cover">
                        <img src="https://picsum.photos/600/400?random=1" alt="旅行相册封面，展示了山脉和湖泊的风景">
                        <div class="photo-count">
                            <i class="fas fa-images"></i> 24
                        </div>
                        <div class="album-privacy" title="公开相册">
                            <i class="fas fa-globe-americas"></i>
                        </div>
                    </div>
                    
                    <div class="album-info">
                        <h3 class="album-title">夏日海边之旅</h3>
                        
                        <div class="album-meta">
                            <div class="meta-item">
                                <i class="far fa-calendar-alt"></i>
                                <span>2023-07-15</span>
                            </div>
                            <div class="meta-item">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>三亚</span>
                            </div>
                        </div>
                        
                        <div class="album-description">
                            这个夏天和朋友们一起去三亚度假，阳光、沙滩、海浪，留下了许多美好的回忆。
                        </div>
                        
                        <div class="album-creator">
                            <img src="https://picsum.photos/100/100?random=101" alt="用户头像" class="creator-avatar">
                            <span class="creator-name">李明</span>
                        </div>
                        
                        <div class="album-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span><strong>342</strong> 浏览</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span><strong>48</strong> 喜欢</span>
                            </div>
                        </div>
                        
                        <div class="album-actions">
                            <div class="action-buttons">
                                <button class="btn-icon">
                                    <i class="far fa-heart"></i>
                                    <span>喜欢</span>
                                </button>
                                <button class="btn-icon">
                                    <i class="far fa-bookmark"></i>
                                    <span>收藏</span>
                                </button>
                            </div>
                            
                            <button class="btn-primary">
                                <i class="fas fa-images"></i>
                                <span>查看相册</span>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 相册2 -->
                <div class="album-card">
                    <div class="album-cover">
                        <img src="https://picsum.photos/600/400?random=2" alt="生日派对相册封面，展示了生日蛋糕和气球">
                        <div class="photo-count">
                            <i class="fas fa-images"></i> 18
                        </div>
                        <div class="album-privacy" title="好友可见">
                            <i class="fas fa-user-friends"></i>
                        </div>
                    </div>
                    
                    <div class="album-info">
                        <h3 class="album-title">25岁生日派对</h3>
                        
                        <div class="album-meta">
                            <div class="meta-item">
                                <i class="far fa-calendar-alt"></i>
                                <span>2023-05-20</span>
                            </div>
                            <div class="meta-item">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>家中</span>
                            </div>
                        </div>
                        
                        <div class="album-description">
                            感谢朋友们来参加我的生日派对，收到了很多祝福和礼物，这是我最难忘的一个生日！
                        </div>
                        
                        <div class="album-creator">
                            <img src="https://picsum.photos/100/100?random=102" alt="用户头像" class="creator-avatar">
                            <span class="creator-name">张婷</span>
                        </div>
                        
                        <div class="album-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span><strong>289</strong> 浏览</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span><strong>63</strong> 喜欢</span>
                            </div>
                        </div>
                        
                        <div class="album-actions">
                            <div class="action-buttons">
                                <button class="btn-icon liked">
                                    <i class="fas fa-heart"></i>
                                    <span>喜欢</span>
                                </button>
                                <button class="btn-icon">
                                    <i class="far fa-bookmark"></i>
                                    <span>收藏</span>
                                </button>
                            </div>
                            
                            <button class="btn-primary">
                                <i class="fas fa-images"></i>
                                <span>查看相册</span>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 相册3 -->
                <div class="album-card">
                    <div class="album-cover">
                        <img src="https://picsum.photos/600/400?random=3" alt="美食相册封面，展示了一桌丰盛的菜肴">
                        <div class="photo-count">
                            <i class="fas fa-images"></i> 32
                        </div>
                        <div class="album-privacy" title="公开相册">
                            <i class="fas fa-globe-americas"></i>
                        </div>
                    </div>
                    
                    <div class="album-info">
                        <h3 class="album-title">周末美食记录</h3>
                        
                        <div class="album-meta">
                            <div class="meta-item">
                                <i class="far fa-calendar-alt"></i>
                                <span>2023-06-10</span>
                            </div>
                            <div class="meta-item">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>家中厨房</span>
                            </div>
                        </div>
                        
                        <div class="album-description">
                            周末在家尝试做了很多新菜式，从早餐到晚餐，记录一下我的美食成果，味道还不错！
                        </div>
                        
                        <div class="album-creator">
                            <img src="https://picsum.photos/100/100?random=103" alt="用户头像" class="creator-avatar">
                            <span class="creator-name">王厨</span>
                        </div>
                        
                        <div class="album-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span><strong>512</strong> 浏览</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span><strong>97</strong> 喜欢</span>
                            </div>
                        </div>
                        
                        <div class="album-actions">
                            <div class="action-buttons">
                                <button class="btn-icon">
                                    <i class="far fa-heart"></i>
                                    <span>喜欢</span>
                                </button>
                                <button class="btn-icon saved">
                                    <i class="fas fa-bookmark"></i>
                                    <span>收藏</span>
                                </button>
                            </div>
                            
                            <button class="btn-primary">
                                <i class="fas fa-images"></i>
                                <span>查看相册</span>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 相册4 -->
                <div class="album-card">
                    <div class="album-cover">
                        <img src="https://picsum.photos/600/400?random=4" alt="宠物相册封面，展示了一只可爱的猫">
                        <div class="photo-count">
                            <i class="fas fa-images"></i> 45
                        </div>
                        <div class="album-privacy" title="公开相册">
                            <i class="fas fa-globe-americas"></i>
                        </div>
                    </div>
                    
                    <div class="album-info">
                        <h3 class="album-title">我家猫咪的日常</h3>
                        
                        <div class="album-meta">
                            <div class="meta-item">
                                <i class="far fa-calendar-alt"></i>
                                <span>2023-01-01</span>
                            </div>
                            <div class="meta-item">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>家中</span>
                            </div>
                        </div>
                        
                        <div class="album-description">
                            记录我家猫咪"煤球"的日常生活，从它刚到家到现在，已经成为家庭的重要成员了。
                        </div>
                        
                        <div class="album-creator">
                            <img src="https://picsum.photos/100/100?random=104" alt="用户头像" class="creator-avatar">
                            <span class="creator-name">刘喵</span>
                        </div>
                        
                        <div class="album-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span><strong>678</strong> 浏览</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span><strong>124</strong> 喜欢</span>
                            </div>
                        </div>
                        
                        <div class="album-actions">
                            <div class="action-buttons">
                                <button class="btn-icon liked">
                                    <i class="fas fa-heart"></i>
                                    <span>喜欢</span>
                                </button>
                                <button class="btn-icon saved">
                                    <i class="fas fa-bookmark"></i>
                                    <span>收藏</span>
                                </button>
                            </div>
                            
                            <button class="btn-primary">
                                <i class="fas fa-images"></i>
                                <span>查看相册</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 示例2：大图布局 -->
        <div class="list-example">
            <h3 class="example-title"><i class="fas fa-image"></i> 大图布局相册</h3>
            <p class="example-description">左侧大图展示，右侧详细信息，适合突出相册内容，展示更多描述信息</p>
            
            <div class="large-image-layout">
                <!-- 相册1 -->
                <div class="album-card">
                    <div class="album-cover">
                        <img src="https://picsum.photos/800/600?random=5" alt="毕业旅行相册封面，展示了一群学生在校园里的合影">
                        <div class="photo-count">
                            <i class="fas fa-images"></i> 56
                        </div>
                        <div class="album-privacy" title="仅自己可见">
                            <i class="fas fa-user"></i>
                        </div>
                    </div>
                    
                    <div class="album-details">
                        <h3 class="album-title">大学毕业旅行 - 青海湖</h3>
                        
                        <div class="album-meta">
                            <div class="meta-item">
                                <i class="far fa-calendar-alt"></i>
                                <span>2023-06-25 至 2023-07-05</span>
                            </div>
                            <div class="meta-item">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>青海湖、西宁、茶卡盐湖</span>
                            </div>
                            <div class="meta-item">
                                <i class="fas fa-user-friends"></i>
                                <span>同行 8 人</span>
                            </div>
                        </div>
                        
                        <div class="album-description">
                            这是我们大学毕业的集体旅行，选择了美丽的青海湖。10天的行程里，我们一起看了青海湖的日出日落，参观了茶卡盐湖的天空之镜，在西宁品尝了当地美食。这是我们毕业前最后一次集体旅行，留下了太多美好的回忆。虽然即将各奔东西，但这段友谊永远不会改变。感谢一路上有你们的陪伴！
                        </div>
                        
                        <div class="album-creator">
                            <img src="https://picsum.photos/100/100?random=105" alt="用户头像" class="creator-avatar">
                            <div>
                                <span class="creator-name">赵同学</span>
                            </div>
                        </div>
                        
                        <div class="album-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>浏览量: <strong>843</strong></span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span>喜欢: <strong>156</strong></span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>评论: <strong>32</strong></span>
                            </div>
                        </div>
                        
                        <div class="album-actions">
                            <div class="action-buttons">
                                <button class="btn-icon">
                                    <i class="far fa-heart"></i>
                                    <span>喜欢</span>
                                </button>
                                <button class="btn-icon">
                                    <i class="far fa-bookmark"></i>
                                    <span>收藏</span>
                                </button>
                                <button class="btn-icon">
                                    <i class="far fa-share-square"></i>
                                    <span>分享</span>
                                </button>
                            </div>
                            
                            <div>
                                <button class="btn-secondary">
                                    <i class="far fa-comment"></i>
                                    <span>评论</span>
                                </button>
                                <button class="btn-primary">
                                    <i class="fas fa-images"></i>
                                    <span>查看全部照片</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 相册2 -->
                <div class="album-card">
                    <div class="album-cover">
                        <img src="https://picsum.photos/800/600?random=6" alt="婚礼相册封面，展示了新郎新娘的合影">
                        <div class="photo-count">
                            <i class="fas fa-images"></i> 128
                        </div>
                        <div class="album-privacy" title="公开相册">
                            <i class="fas fa-globe-americas"></i>
                        </div>
                    </div>
                    
                    <div class="album-details">
                        <h3 class="album-title">我们的婚礼 - 2023.05.20</h3>
                        
                        <div class="album-meta">
                            <div class="meta-item">
                                <i class="far fa-calendar-alt"></i>
                                <span>2023-05-20</span>
                            </div>
                            <div class="meta-item">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>幸福酒店</span>
                            </div>
                            <div class="meta-item">
                                <i class="fas fa-camera"></i>
                                <span>幸福摄影工作室</span>
                            </div>
                        </div>
                        
                        <div class="album-description">
                            这是我们人生中最重要的一天，感谢所有亲朋好友的到来和祝福。从相识、相知到相爱，再到今天步入婚姻的殿堂，我们经历了许多，也成长了许多。未来的路还很长，我们会携手同行，互敬互爱，创造属于我们的幸福生活。特别感谢双方父母的养育之恩，以及所有帮助过我们的人。
                        </div>
                        
                        <div class="album-creator">
                            <img src="https://picsum.photos/100/100?random=106" alt="用户头像" class="creator-avatar">
                            <div>
                                <span class="creator-name">陈夫妇</span>
                            </div>
                        </div>
                        
                        <div class="album-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>浏览量: <strong>1256</strong></span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span>喜欢: <strong>328</strong></span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>评论: <strong>87</strong></span>
                            </div>
                        </div>
                        
                        <div class="album-actions">
                            <div class="action-buttons">
                                <button class="btn-icon liked">
                                    <i class="fas fa-heart"></i>
                                    <span>喜欢</span>
                                </button>
                                <button class="btn-icon">
                                    <i class="far fa-bookmark"></i>
                                    <span>收藏</span>
                                </button>
                                <button class="btn-icon">
                                    <i class="far fa-share-square"></i>
                                    <span>分享</span>
                                </button>
                            </div>
                            
                            <div>
                                <button class="btn-secondary">
                                    <i class="far fa-comment"></i>
                                    <span>评论</span>
                                </button>
                                <button class="btn-primary">
                                    <i class="fas fa-images"></i>
                                    <span>查看全部照片</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 示例3：瀑布流布局 -->
        <div class="list-example">
            <h3 class="example-title"><i class="fas fa-stream"></i> 瀑布流布局相册</h3>
            <p class="example-description">错落有致的瀑布流布局，适合展示不同尺寸的相册封面，视觉上更有层次感</p>
            
            <div class="masonry-layout">
                <!-- 相册1 -->
                <div class="album-card">
                    <div class="album-cover tall">
                        <img src="https://picsum.photos/600/800?random=7" alt="艺术展览相册封面，展示了一幅现代艺术作品">
                        <div class="photo-count">
                            <i class="fas fa-images"></i> 16
                        </div>
                        <div class="album-privacy" title="公开相册">
                            <i class="fas fa-globe-americas"></i>
                        </div>
                    </div>
                    
                    <div class="album-info">
                        <h3 class="album-title">现代艺术展参观</h3>
                        
                        <div class="album-meta">
                            <div class="meta-item">
                                <i class="far fa-calendar-alt"></i>
                                <span>2023-04-12</span>
                            </div>
                            <div class="meta-item">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>当代艺术馆</span>
                            </div>
                        </div>
                        
                        <div class="album-description">
                            周末去看了这个现代艺术展，很多作品都很有创意，让人耳目一新。
                        </div>
                        
                        <div class="album-creator">
                            <img src="https://picsum.photos/100/100?random=107" alt="用户头像" class="creator-avatar">
                            <span class="creator-name">孙艺</span>
                        </div>
                        
                        <div class="album-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span><strong>187</strong></span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span><strong>32</strong></span>
                            </div>
                        </div>
                        
                        <div class="album-actions">
                            <div class="action-buttons">
                                <button class="btn-icon">
                                    <i class="far fa-heart"></i>
                                </button>
                                <button class="btn-icon">
                                    <i class="far fa-bookmark"></i>
                                </button>
                            </div>
                            
                            <button class="btn-primary">
                                <i class="fas fa-images"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 相册2 -->
                <div class="album-card">
                    <div class="album-cover medium">
                        <img src="https://picsum.photos/600/500?random=8" alt="运动相册封面，展示了马拉松比赛的场景">
                        <div class="photo-count">
                            <i class="fas fa-images"></i> 23
                        </div>
                        <div class="album-privacy" title="公开相册">
                            <i class="fas fa-globe-americas"></i>
                        </div>
                    </div>
                    
                    <div class="album-info">
                        <h3 class="album-title">第一次马拉松体验</h3>
                        
                        <div class="album-meta">
                            <div class="meta-item">
                                <i class="far fa-calendar-alt"></i>
                                <span>2023-03-26</span>
                            </div>
                            <div class="meta-item">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>城市体育场</span>
                            </div>
                        </div>
                        
                        <div class="album-description">
                            人生第一次完成半程马拉松，虽然很累但很有成就感，感谢朋友们的鼓励！
                        </div>
                        
                        <div class="album-creator">
                            <img src="https://picsum.photos/100/100?random=108" alt="用户头像" class="creator-avatar">
                            <span class="creator-name">吴跑</span>
                        </div>
                        
                        <div class="album-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span><strong>245</strong></span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span><strong>56</strong></span>
                            </div>
                        </div>
                        
                        <div class="album-actions">
                            <div class="action-buttons">
                                <button class="btn-icon liked">
                                    <i class="fas fa-heart"></i>
                                </button>
                                <button class="btn-icon">
                                    <i class="far fa-bookmark"></i>
                                </button>
                            </div>
                            
                            <button class="btn-primary">
                                <i class="fas fa-images"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 相册3 -->
                <div class="album-card">
                    <div class="album-cover short">
                        <img src="https://picsum.photos/600/400?random=9" alt="美食相册封面，展示了各种甜点">
                        <div class="photo-count">
                            <i class="fas fa-images"></i> 31
                        </div>
                        <div class="album-privacy" title="公开相册">
                            <i class="fas fa-globe-americas"></i>
                        </div>
                    </div>
                    
                    <div class="album-info">
                        <h3 class="album-title">甜点控的天堂</h3>
                        
                        <div class="album-meta">
                            <div class="meta-item">
                                <i class="far fa-calendar-alt"></i>
                                <span>2023-02-14</span>
                            </div>
                            <div class="meta-item">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>甜蜜甜品店</span>
                            </div>
                        </div>
                        
                        <div class="album-description">
                            和闺蜜一起去的这家甜品店，每一款都好好吃，颜值也超高！
                        </div>
                        
                        <div class="album-creator">
                            <img src="https://picsum.photos/100/100?random=109" alt="用户头像" class="creator-avatar">
                            <span class="creator-name">郑甜</span>
                        </div>
                        
                        <div class="album-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span><strong>421</strong></span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span><strong>89</strong></span>
                            </div>
                        </div>
                        
                        <div class="album-actions">
                            <div class="action-buttons">
                                <button class="btn-icon">
                                    <i class="far fa-heart"></i>
                                </button>
                                <button class="btn-icon saved">
                                    <i class="fas fa-bookmark"></i>
                                </button>
                            </div>
                            
                            <button class="btn-primary">
                                <i class="fas fa-images"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 相册4 -->
                <div class="album-card">
                    <div class="album-cover medium">
                        <img src="https://picsum.photos/600/500?random=10" alt="自然风光相册封面，展示了雪山和湖泊">
                        <div class="photo-count">
                            <i class="fas fa-images"></i> 47
                        </div>
                        <div class="album-privacy" title="好友可见">
                            <i class="fas fa-user-friends"></i>
                        </div>
                    </div>
                    
                    <div class="album-info">
                        <h3 class="album-title">雪山徒步之旅</h3>
                        
                        <div class="album-meta">
                            <div class="meta-item">
                                <i class="far fa-calendar-alt"></i>
                                <span>2023-01-05</span>
                            </div>
                            <div class="meta-item">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>雪山国家公园</span>
                            </div>
                        </div>
                        
                        <div class="album-description">
                            挑战了这座海拔4500米的雪山，沿途风景美不胜收，值得一去！
                        </div>
                        
                        <div class="album-creator">
                            <img src="https://picsum.photos/100/100?random=110" alt="用户头像" class="creator-avatar">
                            <span class="creator-name">林登山</span>
                        </div>
                        
                        <div class="album-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span><strong>326</strong></span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span><strong>74</strong></span>
                            </div>
                        </div>
                        
                        <div class="album-actions">
                            <div class="action-buttons">
                                <button class="btn-icon liked">
                                    <i class="fas fa-heart"></i>
                                </button>
                                <button class="btn-icon saved">
                                    <i class="fas fa-bookmark"></i>
                                </button>
                            </div>
                            
                            <button class="btn-primary">
                                <i class="fas fa-images"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 相册5 -->
                <div class="album-card">
                    <div class="album-cover tall">
                        <img src="https://picsum.photos/600/800?random=11" alt="城市夜景相册封面，展示了城市的灯光">
                        <div class="photo-count">
                            <i class="fas fa-images"></i> 28
                        </div>
                        <div class="album-privacy" title="公开相册">
                            <i class="fas fa-globe-americas"></i>
                        </div>
                    </div>
                    
                    <div class="album-info">
                        <h3 class="album-title">城市夜景摄影</h3>
                        
                        <div class="album-meta">
                            <div class="meta-item">
                                <i class="far fa-calendar-alt"></i>
                                <span>2023-06-30</span>
                            </div>
                            <div class="meta-item">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>城市天际线</span>
                            </div>
                        </div>
                        
                        <div class="album-description">
                            尝试用长曝光拍摄城市夜景，灯光轨迹真的很美，推荐摄影爱好者尝试。
                        </div>
                        
                        <div class="album-creator">
                            <img src="https://picsum.photos/100/100?random=111" alt="用户头像" class="creator-avatar">
                            <span class="creator-name">摄影爱好者</span>
                        </div>
                        
                        <div class="album-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span><strong>278</strong></span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span><strong>63</strong></span>
                            </div>
                        </div>
                        
                        <div class="album-actions">
                            <div class="action-buttons">
                                <button class="btn-icon">
                                    <i class="far fa-heart"></i>
                                </button>
                                <button class="btn-icon">
                                    <i class="far fa-bookmark"></i>
                                </button>
                            </div>
                            
                            <button class="btn-primary">
                                <i class="fas fa-images"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 示例4：简约列表布局 -->
        <div class="list-example">
            <h3 class="example-title"><i class="fas fa-list"></i> 简约列表布局相册</h3>
            <p class="example-description">简洁的列表式布局，突出相册基本信息，适合快速浏览大量相册</p>
            
            <div class="simple-list-layout">
                <!-- 相册1 -->
                <div class="album-card">
                    <div class="album-cover">
                        <img src="https://picsum.photos/400/400?random=12" alt="公司年会相册封面">
                        <div class="photo-count">
                            <i class="fas fa-images"></i> 36
                        </div>
                    </div>
                    
                    <div class="album-info">
                        <h3 class="album-title">2023公司年会</h3>
                        
                        <div class="album-meta">
                            <div class="meta-item">
                                <i class="far fa-calendar-alt"></i>
                                <span>2023-01-20</span>
                            </div>
                            <div class="meta-item">
                                <i class="fas fa-user"></i>
                                <span>王同事</span>
                            </div>
                        </div>
                        
                        <div class="album-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span><strong>521</strong></span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span><strong>47</strong></span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="album-actions">
                        <div class="action-buttons">
                            <button class="btn-icon">
                                <i class="far fa-heart"></i>
                            </button>
                            <button class="btn-icon">
                                <i class="far fa-bookmark"></i>
                            </button>
                            <button class="btn-primary">
                                <i class="fas fa-images"></i>
                                <span>查看</span>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 相册2 -->
                <div class="album-card">
                    <div class="album-cover">
                        <img src="https://picsum.photos/400/400?random=13" alt="新年聚会相册封面">
                        <div class="photo-count">
                            <i class="fas fa-images"></i> 29
                        </div>
                    </div>
                    
                    <div class="album-info">
                        <h3 class="album-title">新年家庭聚会</h3>
                        
                        <div class="album-meta">
                            <div class="meta-item">
                                <i class="far fa-calendar-alt"></i>
                                <span>2023-01-22</span>
                            </div>
                            <div class="meta-item">
                                <i class="fas fa-user"></i>
                                <span>张家人</span>
                            </div>
                        </div>
                        
                        <div class="album-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span><strong>328</strong></span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span><strong>63</strong></span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="album-actions">
                        <div class="action-buttons">
                            <button class="btn-icon liked">
                                <i class="fas fa-heart"></i>
                            </button>
                            <button class="btn-icon">
                                <i class="far fa-bookmark"></i>
                            </button>
                            <button class="btn-primary">
                                <i class="fas fa-images"></i>
                                <span>查看</span>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 相册3 -->
                <div class="album-card">
                    <div class="album-cover">
                        <img src="https://picsum.photos/400/400?random=14" alt="花卉展览相册封面">
                        <div class="photo-count">
                            <i class="fas fa-images"></i> 42
                        </div>
                    </div>
                    
                    <div class="album-info">
                        <h3 class="album-title">春季花卉展览</h3>
                        
                        <div class="album-meta">
                            <div class="meta-item">
                                <i class="far fa-calendar-alt"></i>
                                <span>2023-04-05</span>
                            </div>
                            <div class="meta-item">
                                <i class="fas fa-user"></i>
                                <span>花仙子</span>
                            </div>
                        </div>
                        
                        <div class="album-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span><strong>645</strong></span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span><strong>108</strong></span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="album-actions">
                        <div class="action-buttons">
                            <button class="btn-icon">
                                <i class="far fa-heart"></i>
                            </button>
                            <button class="btn-icon saved">
                                <i class="fas fa-bookmark"></i>
                            </button>
                            <button class="btn-primary">
                                <i class="fas fa-images"></i>
                                <span>查看</span>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 相册4 -->
                <div class="album-card">
                    <div class="album-cover">
                        <img src="https://picsum.photos/400/400?random=15" alt="博物馆参观相册封面">
                        <div class="photo-count">
                            <i class="fas fa-images"></i> 25
                        </div>
                    </div>
                    
                    <div class="album-info">
                        <h3 class="album-title">历史博物馆参观</h3>
                        
                        <div class="album-meta">
                            <div class="meta-item">
                                <i class="far fa-calendar-alt"></i>
                                <span>2023-05-18</span>
                            </div>
                            <div class="meta-item">
                                <i class="fas fa-user"></i>
                                <span>历史迷</span>
                            </div>
                        </div>
                        
                        <div class="album-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span><strong>298</strong></span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span><strong>36</strong></span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="album-actions">
                        <div class="action-buttons">
                            <button class="btn-icon liked">
                                <i class="fas fa-heart"></i>
                            </button>
                            <button class="btn-icon saved">
                                <i class="fas fa-bookmark"></i>
                            </button>
                            <button class="btn-primary">
                                <i class="fas fa-images"></i>
                                <span>查看</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 点赞功能交互
        document.querySelectorAll('.btn-icon').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                
                // 点赞按钮交互
                if (this.querySelector('.fa-heart')) {
                    this.classList.toggle('liked');
                    const icon = this.querySelector('.fa-heart');
                    if (this.classList.contains('liked')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                    }
                }
                
                // 收藏按钮交互
                if (this.querySelector('.fa-bookmark')) {
                    this.classList.toggle('saved');
                    const icon = this.querySelector('.fa-bookmark');
                    if (this.classList.contains('saved')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                    }
                }
                
                // 分享按钮交互
                if (this.querySelector('.fa-share-square')) {
                    const albumTitle = this.closest('.album-card').querySelector('.album-title').textContent.trim();
                    alert(`分享相册: "${albumTitle}"`);
                }
                
                // 评论按钮交互
                if (this.querySelector('.fa-comment')) {
                    const albumTitle = this.closest('.album-card').querySelector('.album-title').textContent.trim();
                    alert(`评论相册: "${albumTitle}"`);
                }
            });
        });
        
        // 查看相册按钮交互
        document.querySelectorAll('.btn-primary').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                const albumTitle = this.closest('.album-card').querySelector('.album-title').textContent.trim();
                const photoCount = this.closest('.album-card').querySelector('.photo-count').textContent.trim();
                alert(`正在查看相册: "${albumTitle}" (${photoCount})`);
            });
        });
    </script>
</body>
</html>
    
